<script>
import axios from "axios";

export default {
  name: "ReviewDetail",
  props: ['review', 'init'],
  data() {
    return {
      recover_data: [
        {
          recover: {
            id: "",
            nickname: '',
            reviewName: '',
            uid: '',
            content: '',
            time: '',
            likes: '',
            isLiked: ''
          },
          recovers: [
            {
              id: "",
              nickname: '',
              reviewName: '',
              uid: '',
              content: '',
              time: '',
              likes: '',
              isLiked: ''
            }
          ]
        }
      ],
      hotOrTime: true,
      loading: false,
      likes:0
    }
  },
  methods: {
    rdPxClick() {
      this.loading = true
      let id = this.review.id
      if (this.hotOrTime) {
        axios.get(`/api/review/reviews/hot/${id}`)
            .then(res => {
              this.loading = false
              if (res.data.code === 0) {
                this.recover_data = res.data.data
                if(this.recover_data.length === 0) {
                  this.$emit('getDynamicList')
                  this.$emit('exit')
                }
              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))
      } else {
        axios.get(`/api/review/reviews/time/${id}`)
            .then(res => {
              this.loading = false
              if (res.data.code === 0) {
                this.recover_data = res.data.data
                if(this.recover_data.length === 0) {
                  this.$emit('getDynamicList')
                  this.$emit('exit')
                }
              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))
      }

    },
    del(id) {
      axios.get(`/api/review/del/${id}`)
          .then(() => {
            this.$message.success("删除成功")
            this.rdPxClick()
          })
          .catch(err => this.$message.error(err))
    },
    dzClick2(e, id, index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/review/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                div.classList.add('f_color')
                this.recover_data[index].recover.likes++
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/review/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.recover_data[index].recover.likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    dzClick3(e, id, index,c_index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/review/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                div.classList.add('f_color')
                this.recover_data[index].recovers[c_index].likes++
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/review/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.recover_data[index].recovers[c_index].likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },

    dzClick1(e, id) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/review/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                this.likes++
                this.$emit('getDynamicList')
                div.classList.add('f_color')
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/review/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.likes--
                this.$emit('getDynamicList')
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
  },
  watch: {
    init: {
      immediate: true,
      handler(value) {
        if (value) {
          this.rdPxClick()
          this.likes = this.review.likes
        }
      }
    }
  },
  mounted() {
    this.$bus.$on('getRecover', this.rdPxClick)
  },
  beforeDestroy() {
    this.$bus.$off('getRecover')
  }
}
</script>

<template>
  <div class="rd_box" >
    <div class="px_xq">
      <el-avatar class="px_xq_avatar" :src="review.avatar"></el-avatar>
      <div class="px_xq_r" style="width: 87%">
        <div class="pl_nr">
          <span>{{ review.nickname }}</span>:
          {{ review.content }}
        </div>
        <div class="px_xq_b">
          <div class="pl_time">{{ review.time }}</div>
          <div class="pl_xq_cz">
            <i class="iconfont icon-fenxiang1"></i>
            <i class="iconfont icon-pinglun" @click="$emit('setReview',review)"></i>
            <span><i :class="review.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "
                     @click="dzClick1($event,review.id)"></i>{{
                likes
              }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="px_xx" style="width: 100px;font-size: 15px;margin-left: 55px;padding-top: 10px">
      <a :class="hotOrTime?'px_xx_c':''" @click="hotOrTime=true;rdPxClick()">按热度</a>
      <a :class="hotOrTime?'':'px_xx_c'" @click="hotOrTime=false;rdPxClick()">按时间</a>
    </div>
    <div v-loading="loading">
      <div class="px_xq_r" style="width: 88%;margin-left: 55px" v-for="(item,index) in recover_data" :key="index">
        <div class="pl_nr">
          <span>{{ item.recover.nickname }}</span>:
          {{ item.recover.content }}
        </div>
        <div class="px_xq_b">
          <div class="pl_time">{{ item.recover.time }}</div>
          <div class="pl_xq_cz">
            <i @click="del(item.recover.id)" class="el-icon-delete"
               v-show="item.recover.uid === $store.state.user.id"></i>
            <i class="iconfont icon-fenxiang1"></i>
            <i class="iconfont icon-pinglun" @click="$emit('setReview',item.recover)"></i>
            <span><i :class="item.recover.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan'" @click="dzClick2($event,item.recover.id,index)"></i>{{
                item.recover.likes
              }}</span>
          </div>
        </div>
        <div class="px_xq_r" style="margin-left: 20px;width: 96%;"
             v-for="(r_item,r_index) in recover_data[index].recovers" :key="r_index">
          <div class="pl_nr">
            <span>{{ r_item.nickname }}</span>:<span>@{{ r_item.reviewName }}</span>
            {{ r_item.content }}
          </div>
          <div class="px_xq_b">
            <div class="pl_time">{{ r_item.time }}</div>
            <div class="pl_xq_cz">
              <i @click="del(r_item.id)" class="el-icon-delete" v-show="r_item.uid === $store.state.user.id"></i>
              <i class="iconfont icon-fenxiang1"></i>
              <i class="iconfont icon-pinglun" @click="$emit('setReview',r_item)"></i>
              <span><i :class="r_item.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' " @click="dzClick3($event,r_item.id,index,r_index)"></i>{{
                  r_item.likes
                }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style>
.rd_box {
  margin-top: -30px;
  max-height: 500px;
  overflow-y: auto;
}
</style>